<!--  -->
<template>
  <div class="mytodos">
    <!-- 标题开始 -->
    <div class="mytodos-header">
      <h1>todos</h1>
    </div>
    <!-- 标题结束 -->
    <!-- 内容开始 -->
    <div class="mytodos-content">
      <!-- 顶部开始 -->
      <div class="mytodos-content-top">
        <div
          :class="['content-top-left', { allchecked: allChecked }]"
          @click.stop="handleAllCheck"
        >
          >
        </div>
        <div class="content-top-right">
          <input type="text" @keyup.enter="saveTodo" v-model="inputVal" v-focus />
        </div>
      </div>
      <!-- 顶部结束 -->
      <!-- 中间列表开始 -->
      <div class="mytodos-content-mid">
        <div class="content-mid-list">
          <div
            class="mid-list-item"
            v-for="(item, index) in filterTodos"
            :key="item.id"
          >
            <div class="list-item-left">
              <input type="checkbox" name="" id="" v-model="item.status" />
            </div>
            <div
              :class="['list-item-mid', { completed: item.status }]"
              @dblclick="handleEditTodo(index)"
            >
              <span :class="['title', { hidden: edit_index === index }]">{{
                item.text
              }}</span>
              <input
                :class="[{ hidden: edit_index !== index }]"
                type="text"
                v-model="item.text"
                @blur="saveEditTodo"
              />
            </div>
            <div class="list-item-right" @click.stop="deleteTodo(index)">X</div>
          </div>
        </div>
      </div>
      <!-- 中间列表结束 -->
      <!-- 底部功能栏开始 -->
      <div class="mytodos-content-bottom">
        <div class="content-bottom-left">{{remaining}} 项剩下</div>
        <div class="content-bottom-mid">
          <div @click.stop="handleItemClick('all')" :class="['mid-left',{active:activeTab==='all'}]">全部</div>
          <div @click.stop="handleItemClick('active')" :class="['mid-mid',{active:activeTab==='active'}]">激活</div>
          <div @click.stop="handleItemClick('completed')" :class="['mid-right',{active:activeTab==='completed'}]">完成</div>
        </div>
        <div class="content-bottom-right" @click="handleClearCompleted">清除已完成</div>
      </div>
      <!-- 底部功能栏结束 -->
    </div>
    <!-- 内容结束 -->
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      activeTab:"all",// all active completed
      edit_index: -1, // -1 表示没有编辑 0 正在编辑第0行
      inputVal: "",
      todos: JSON.parse(localStorage.getItem("todos")||'[]')
      //[
        // {
        //   text: "吃饭",
        //   status: true, // active=>false  completed=> true
        //   id: 1,
        // },
        // {
        //   text: "吃饭",
        //   status: false,
        //   id: 2,
        // },
    //  ],
    };
  },
  //监听属性 类似于data概念
  computed: {
    // 剩下项目
    remaining:function(){
      let remainingTodos = this.todos.filter(v=>{
        // return !v.status // false => 返回
        if(!v.status){
          return true;
        }
      })
      return remainingTodos.length;
    },
    // 过滤后的todos
    filterTodos() {
      // all active completed
      if(this.activeTab == "all"){
        return this.todos;
      }else if(this.activeTab == "active"){
        return this.todos.filter(function(v){
          // v.status => false
          return !v.status;
        })
      }else if(this.activeTab == "completed"){
        return this.todos.filter(function(v){
          // v.status => true
          return v.status;
        })
      }
    },
    allChecked: function () {
      let checked = true;
      // 只要todo 里面有一个 status false => allChecked = false
      this.todos.map((v) => {
        if (!v.status) checked = false;
      });
      return checked;
    },
  },
  //监控data中的数据变化
  watch: {
    todos:{
      handler:function(newTodos){
        localStorage.setItem("todos",JSON.stringify(newTodos));
      },
      deep:true
    }
  },
  //方法集合
  methods: {
    // 清除已完成
    handleClearCompleted:function(){
      // 筛选出未完成 => todos
      let activeTodos = this.todos.filter(v=>{
        // v.status => false
        return !v.status; // false => !false => true
      })
      this.todos = activeTodos;
    },
    // 底部功能栏 筛选
    handleItemClick:function(activeTab){
      this.activeTab = activeTab;
    },
    // todo 编辑项 失焦
    saveEditTodo: function () {
      this.edit_index = -1;
    },
    // 双击编辑的逻辑
    handleEditTodo: function (index) {
      console.log("正在编辑", index, "行");
      this.edit_index = index;
    },
    // 删除todo逻辑
    deleteTodo: function (index) {
      this.todos.splice(index, 1);
    },
    // 全选的逻辑
    handleAllCheck: function () {
     // this.allChecked = true;
      // 1. 新拷贝一个todos
      let newTodos = JSON.parse(JSON.stringify(this.todos));
      // 2. todo 中的每一个状态 true
      newTodos.map((v) => {
        v.status = true;
      });
      // 3. 赋值给 todos
      this.todos = newTodos;
    },
    saveTodo: function () {
      if (!this.inputVal) {
        this.$message({
          message: "输入不能为空！",
          type: "warning",
        });
        return false;
      }
      this.todos.push({
        text: this.inputVal,
        status: false,
        id: Date.now(),
      });
    },
  },
  directives:{
    "focus":{
      inserted:function(el){
        el.focus();
      }
    }
  }
};
</script>
<style lang='less' scoped>
@import '@/assets/css/todo.less';
</style>